<template>
  <a-input-group compact v-if="numVal">
    <a-input-number
      :value="numVal.value"
      @change="emitValue"
      :min="0"
      :max="999"
      :step="1"
      size="small"
      class="hv-number-unit-input-left"
    />

    <a-select
      :value="numVal.unit"
      @change="selectChange"
      class="hv-number-unit-input-right"
      dropdownClassName="hv-dark-select-dropdown"
    >
      <a-select-option
        :value="item.value"
        v-for="(item, index) in constList"
        :key="index"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>
  </a-input-group>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import { defaultNumberUnitListConst } from "@/visual/commons/consts/dashboard-const";

const props = defineProps({
  constList: {
    type: Object as PropType<any>,
    default: () => {
      return defaultNumberUnitListConst;
    },
  },
  numVal: {
    type: Object as PropType<{ value: string; unit: string }>,
    default: () => {
      return defaultNumberUnitListConst[0];
    },
  },
});

const emit = defineEmits(["update:numVal"]);

const selectChange = (unit: string) => {
  emit("update:numVal", {
    unit,
    value: props.numVal.value,
  });
};

const emitValue = (value: string) => {
  emit("update:numVal", {
    unit: props.numVal.unit,
    value,
  });
};
</script>

<style lang="less" scoped>
@import "./NumberUnitInput.less";
</style>
